<template>
	<view class="column-css">
		<view style="color: #C8C7CC;padding: 20rpx 30rpx;font-size: 24rpx;">请添加持卡人本人的银行卡</view>
		<view class="column-css" style="background: #FFFFFF;">
			<view class="row-css view-centen-text" style="margin: 0 30rpx;">
				<view style="width: 180rpx;">姓名</view>
				<view>
					<form><input disabled="true" v-model="personName" /></form>
				</view>
			</view>
			<view class="row-css view-centen-text" style="margin: 0 30rpx;">
				<view style="width: 180rpx;">卡号</view>
				<view class="row-css" style="flex: 1;">
					<view style="flex: 1;">
						<form><input type="number" v-model="bankNo" placeholder="请输入完整银行卡号" @input="onbindcard" /></form>
					</view>
					<view style="display: flex; align-items: center;" @tap="chooseImage()">
						<image style="width: 38rpx;height: 33rpx;margin-left: 10rpx;" mode="aspectFit" src="../../static/icon_certification.png"></image>
					</view>
				</view>
			</view>
			<!-- @click="onselectbank" -->
			<view class="row-css view-centen-text" style="margin: 0 30rpx;justify-content: space-between;align-items: center;" @click="onselectbank">
				<view class="row-css">
					<view style="width: 180rpx;">开户行</view>
					<view style="flex: 1;">
						<form><input disabled="true" v-model="bankName" placeholder="请选择开户行" /></form>
					</view>
				</view>
				<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
			</view>
			<view class="row-css view-centen-text" style="margin: 0 30rpx;">
				<view style="width: 180rpx;">手机号</view>
				<view>
					<form><input v-model="mobilePhone" placeholder="输入银行卡预留手机号" /></form>
				</view>
			</view>

			<view class="row-css view-centen-text" style="margin-left:30rpx;margin-right: 10rpx;">
				<view style="width: 180rpx;">验证码</view>
				<form>
					<view class="row-css" style="align-items: center;justify-content: space-between;">
						<input type="phone" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入验证码" v-model="verifyCode" />
						<view style="font-size: 14px;color: #007AFF;" @click="sendcode">{{ codeText }}</view>
					</view>
				</form>
			</view>
		</view>

		<view class="row-css" style="width: 100%;margin: 60rpx 0;">
			<button class="mini-btn" style="background: #007AFF;" type="primary" size="default" @click="oncertification()">下一步</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			time: 60,
			codeText: '获取验证码',
			personName: '',
			bankNo: '',
			bankName: '',
			bankme: '',
			bankCode: '',
			mobilePhone: '',
			verifyCode: ''
		};
	},
	onLoad(options) {
		this.personName = uni.getStorageSync(this.DATA_KEY.userInfo).driverName;
	},
	onShow() {
		console.log('ddddddddddddddddddd===============', this.bankName);
	},
	methods: {
		onselectbank() {
			uni.navigateTo({
				url: '../personal/selectbank?bankName=' + this.bankme
			});
		},
		sendcode() {
			var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
			if (this.mobilePhone == '' && this.mobilePhone != null) {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				});
			} else if (!reg.test(this.mobilePhone)) {
				uni.showToast({
					title: '手机格式不正确',
					icon: 'none'
				});
			} else {
				if (this.bankNo == '' || this.bankme == '') {
					uni.showToast({
						title: '请输入银行卡号并获取银行名！',
						icon: 'none'
					});
					return;
				}
				if (this.bankCode == '') {
					uni.showToast({
						title: '请选择开户行！',
						icon: 'none'
					});
					return;
				}
				if (this.time == 60) {
					this.timer = setInterval(() => {
						this.codeText = `${this.time}s后获取验证码`;
						this.time--;
						if (this.time < 0) {
							this.time = 60;
							this.codeText = '获取验证码';
							clearInterval(this.timer);
						}
					}, 1000);
					this.wxRequest({
						url: `${this.API}/mini/jzb/bindBankCardMsg`,
						method: 'POST',
						data: {
							bankNo: this.bankNo,
							bankCode: this.bankCode,
							mobile: this.mobilePhone
						},
						title: '验证码发送中...',
						success: res => {
							if (res.data.data == '2') {
								uni.navigateTo({
									url: '../personal/tiedsuccessfully?bankNo=' + this.bankNo + '&bankName=' + this.bankName
								});
							} else {
								uni.showToast({
									title: '验证码已发送成功',
									icon: 'none'
								});
							}
						}
					});
				}
			}
		},
		querySuperBank() {
			console.log('31');
			this.wxRequest({
				url: `${this.API}/mini/jzb/querySuperBank`,
				method: 'POST',
				data: {
					bankName: this.bankme
				},
				title: '查询中...',
				success: res => {
					this.bankName = res.data.data[0].data[0].bankName;
					this.bankCode = res.data.data[0].data[0].bankCode;
					console.log('dddd===33========', res.data.data);
					console.log('dddd===444========', res.data.data[0].data[0].bankCode);
				}
			});
		},
		onbindcard: function(event) {
			console.log(/^\d+$/.test(event.target.value));
			if(!/^\d+$/.test(event.target.value)){
				uni.showToast({
					title: '银行卡号格式不正确',
					icon: 'none'
				});
				return
			}
			if (event.target.value.length == 16 || event.target.value.length == 19 || event.target.value.length == 17) {
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getBankByCardNo`,
					method: 'POST',
					data: {
						cardNo: this.bankNo
					},
					title: '银行卡鉴别中...',
					success: res => {
						this.bankNo = res.data.data[0].cardNo;
						this.bankme = res.data.data[0].bankName;
						// console.log("000============",this.bankme.indexOf("中国"));
						// console.log("000============",this.bankme.indexOf("中国银行"));
						if(this.bankme.indexOf("中国") != -1 && this.bankme.indexOf("中国银行") == -1){
							this.bankme = this.bankme.replace("中国","");
						}
						this.querySuperBank();
					}
				});
			}
		},
		chooseImage: function() {
			// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
			uni.chooseImage({
				count: 1,
				sizeType:'compressed',
				success: res => {
					console.log('dddd:', res);
					uni.showLoading({
						title: '上传中'
					});
					// uni.getFileInfo({
					// 	filePath : res.tempFilePaths[0],
					// 	digestAlgorithm: "md5",
					// 	success: function (res) {
					// 		console.log("dddd MD5  ", res);
					// 	}
					// });
					uni.uploadFile({
						url: `${this.API}/mini/erLeiHu/ocrBankCard`,
						fileType: 'image',
						name: 'file',
						filePath: res.tempFilePaths[0],
						file: res.tempFiles,
						header: {
							'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
							Authorization: uni.getStorageSync(this.DATA_KEY.token)
						},
						formData: {
							fileType: '2',
							mobile: this.mobileNo,
							fileId: Math.floor(Math.random() * 1259),
							ocrOrNot: '1',
							orderId: ''
						},
						success: res => {
							uni.hideLoading();
							this.bankNo = JSON.parse(res.data).data[0].cardNo;
							this.bankme = JSON.parse(res.data).data[0].bankName;
							// console.log("000============",this.bankme.indexOf("中国"));
							// console.log("000============",this.bankme.indexOf("中国银行"));
							// if(this.bankme.indexOf("中国") != -1 && this.bankme.indexOf("中国银行") == -1){
							// 	this.bankme = this.bankme.replace("中国","");
							// }
							this.querySuperBank();
						},
						fail: error => {
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		oncertification() {
			if (this.bankNo == '' || this.bankme == '') {
				uni.showToast({
					title: '请输入银行卡号并获取银行名！',
					icon: 'none'
				});
				return;
			}
			if (this.bankCode == '') {
				uni.showToast({
					title: '请输入正确的银行卡号！',
					icon: 'none'
				});
				return;
			}
			if (this.verifyCode == '') {
				uni.showToast({
					title: '请输入验证码！',
					icon: 'none'
				});
				return;
			}
			this.wxRequest({
				url: `${this.API}/mini/jzb/bindBankCard`,
				method: 'POST',
				data: {
					bankNo: this.bankNo,
					verifyCode: this.verifyCode,
					bankCode: this.bankCode
				},
				title: '绑定中...',
				success: res => {
					uni.navigateTo({
						url: '../personal/tiedsuccessfully?bankNo=' + this.bankNo + '&bankName=' + res.data.data.bankName
					});
				}
			});
		}
	}
};
</script>

<style>
page {
	/* background: #ffffff; */
	font-size: 30rpx;
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-centen-text {
	border-bottom: 1rpx solid #f1f1f1;
	padding: 20rpx 10rpx;
	flex: 1;
}

.view-cent {
	padding-left: 15upx;
	flex: 1;
	font-size: 30rpx;
	margin: 0 50rpx;
}

.mini-btn {
	width: 100%;
	background: #2979ff;
	font-size: 28rpx;
	padding: 10rpx 0;
	margin: 0 20rpx;
}

.line-veiw {
	height: 5rpx;
	width: 100%;
	margin-top: 20rpx;
	background: #f2f2f2;
}
</style>
